<script setup>
import PageContainer from "@/components/AdminConponents/PageContainer.vue";
import {ref, onMounted} from "vue";
import {useAdminStore} from "@/stores/index.js";
import {updateAdminInfoAPI} from "@/api/AdminApi/admin.js";
import 'element-plus/theme-chalk/el-message.css'
import { ElMessage } from "element-plus"

const formRef = ref()
const {
  adminInfo: { id, name, username, phone, idNumber},
  getAdminInfo
} = useAdminStore()

const form = ref({
  id,
  name,
  username,
  phone,
  idNumber
})

const rules = {
  name: [
    { required: true, message: '请输入姓名', trigger: 'blur' },
    { min: 2, max: 10, message: '姓名长度在 2 到 10 个字符之间', trigger: 'blur' }
  ],
  phone: [
    { required: true, message: '请输入电话号码', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '电话号码格式不正确', trigger: 'blur' }
  ],
}

const submitForm = async () => {
  // 等待校验结果
  await formRef.value.validate()
  // 提交修改
  await updateAdminInfoAPI(form.value)
  // 进行数据更新
  getAdminInfo()
  // 提示用户
  ElMessage.success('修改成功')
}

onMounted(() => {
  getAdminInfo()
})
</script>

<template>
  <page-container title="基本资料">
    <!-- 表单部分 -->
    <template #default>
      <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
        <el-form-item class="item" label="用户名">
          <el-input v-model="form.username" disabled></el-input>
        </el-form-item>
        <el-form-item class="item" label="身份证号">
          <el-input v-model="form.idNumber" disabled></el-input>
        </el-form-item>
        <el-form-item class="item" label="姓名" prop="name">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item class="item" label="电话" prop="phone">
          <el-input v-model="form.phone"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm">提交修改</el-button>
        </el-form-item>
      </el-form>
    </template>
  </page-container>
</template>

<style scoped>
.item {
  width: 500px;
}
</style>
